<template>
    <div class="info-container">
        <div class="game-info">
            <div>当前轮数：第{{ gameData.roundNumber }}轮</div>
            <div>行动诸侯：{{ }}</div>
        </div>
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th scope="col">国号</th>
                        <th scope="col">天命点</th>
                        <th scope="col">发展点</th>
                        <th scope="col">资源点</th>
                        <th scope="col">动员点</th>
                        <th scope="col">总军事点</th>
                        <th scope="col">凶吉卡</th>
                        <th scope="col">状态一览</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="player in gameData.playerStates.playerList" :key="player.name">
                        <td>{{ player.name }}</td>
                        <td>
                            <div class="td-content">
                                <Token type="fate" :size="tokenSize" :sup="String(player.tokens.fate.base)"
                                    :sub="String(player.tokens.fate.tempChanged)"></Token>
                            </div>
                        </td>
                        <td>
                            <div class="td-content">
                                <Token type="development" :size="tokenSize"
                                    :sup="String(player.tokens.development.base)"
                                    :sub="String(player.tokens.development.tempChanged)"></Token>
                            </div>
                        </td>
                        <td>
                            <div class="td-content">
                                <Token type="resource" :size="tokenSize" :sup="String(player.tokens.resource.base)">
                                </Token>
                            </div>
                        </td>
                        <td>
                            <div class="td-content">
                                <Token type="mobilization" :size="tokenSize" :sup="String(player.tokens.fate.base)"
                                    :sub="String(player.tokens.fate.tempChanged)"></Token>
                            </div>
                        </td>
                        <td>
                            <div class="td-content">
                                <Token type="military" :size="tokenSize"
                                    :sup="String(Player.sumMilitary(player, 'attack').base)"
                                    :sub="String(Player.sumMilitary(player, 'attack').extra)"></Token>
                                <span>|</span>
                                <Token type="military" back-side :size="tokenSize"
                                    :sup="String(Player.sumMilitary(player, 'defense').base)"
                                    :sub="String(Player.sumMilitary(player, 'attack').extra)"></Token>
                            </div>
                        </td>
                        <td>
                            <div class="td-content">
                                <FateCard type="good"></FateCard><span>:</span>
                                <FateCard type="bad"></FateCard>
                                <span>={{ player.fateCards.good.base }}:{{ player.fateCards.bad.base
                                    }}</span>
                            </div>
                        </td>
                        <td>
                            <div class="td-content">
                                <State v-for="state in player.states" :key="state.name" :type="state.name"
                                    :size="stateSize">
                                </State>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script lang="ts" setup>
import Token from '@/components/game/token.vue';
import State from '@/components/game/state.vue';
import FateCard from '@/components/game/card/fate-card.vue';
import Player from '@/game/player';
import useGameStore from '@/store/game';
import { GameData } from '@/types/game';
const stateSize = 'min(32px,3.5vw)';
const tokenSize = 'min(36px,4vw)';
const gameStore = useGameStore();
const gameData: GameData = gameStore.$state;
</script>

<style scoped>
.info-container {
    display: flex;
    flex-direction: column;
    gap: 2vmin;
    width: 100%;
    height: 100%;
}

.game-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10vmin;
    margin-top: 1vmin;
}

.table-container {
    display: flex;
    justify-content: center;
    width: 100%;
    max-height: max-content;
    overflow: auto;
}

table {
    border-collapse: collapse;
}

thead {
    position: sticky;
    top: -1px;
    background-color: gray;
    z-index: 999;
}

th,
td {
    border: 1px solid rgb(0, 0, 0, 0.5);
    padding: 8px 10px;
}

td {
    height: 80px;
    text-align: center;
}

.td-content {
    display: flex;
    justify-content: center;
    align-self: center;
}

.td-content span {
    display: inline-flex;
    justify-content: center;
    align-self: center;
}
</style>